<!DOCTYPE html>
<html>
<head>
    <title></title>
    <!--<#include "/header.html">-->
    <link rel="stylesheet" href="${request.contextPath}/statics/css/baseinfo/showEquipmentParams.css">
</head>
<body>
<div id="rrapp" class="tck" v-cloak style="background: #102344;width: 1300px;height: 520px;">
    <div style="width: 100%;border: none;margin:16px 0 -14px -5px " class="azd">
        <p style="display: inline;color: #fff;font-size: 20px;margin-left: 200px;">安装点名称：
        <div style="color: yellow;display: inline;font-size: 16px;">{{lhpInstallationPoint.pointName}}</div>
        </p>
        <p style="display: inline;color: #fff;font-size:20px;margin-left: 25px;position: absolute;top: -5px;left:520px;">
            采集时间：
            <span id="time" style="color:yellow;font-size:16px;margin-left: 8px;">-</span></p>
    </div>
    <div class="zuo" style="width: 18.6%;" id="weatherDiv">
        <div class="box1" style="border: 1px solid #2e4984;width: 100%;background: #142747;box-shadow: inset 0px 0px 5px #3367c4;
        height: 90%;margin-left: 12px;padding: 8px">


            <div class="biaoti" style="background: none"><p
                    style="font-size: 20px;margin: 0 auto ;margin-top: 10px;width: 100%;left: 0%">
                &nbsp;气象站数据</p></div>
            <div style="">
                <div class="nr"
                     style="background: url('../../statics/image/shebei_kuang.png') no-repeat;height:19%;width: 45%;top:70px">
                    <div class="cen" style="background: none;border: none;top:8%">
                        <p style="color: #1FE8F0;font-size: 18px;margin: 12px auto;">
                            <img src="../../statics/image/shebei_wendu.png" alt="">
                            温度</p>
                    </div>
                    <p style="color:yellow;font-size:18px;margin: 44px auto;font-weight: 530;">
                        {{lhpDataWeatherStation.airTemp}} ℃ </p>
                </div>

                <div class="nr1"
                     style="background: url('../../statics/image/shebei_kuang.png') no-repeat;height:19%;width: 45%;top:70px;left: 52%">
                    <div class="cen" style="background: none;border: none;top:8%">
                        <p style="color: #1FE8F0;font-size: 18px;margin: 12px auto;">
                            <img src="../../statics/image/shebei_shidu.png" alt="">
                            湿度</p>
                    </div>
                    <p style="color:yellow;font-size:18px;margin: 44px auto;font-weight:530;">
                        {{lhpDataWeatherStation.relativeHumidity}} %</p>
                </div>
            </div>


            <div style="">
                <div class="nr2"
                     style="background: url('../../statics/image/shebei_kuang.png') no-repeat;height:19%;width: 45%;top:45%;left: 3%">
                    <div class="cen" style="background: none;border: none;top:8%">
                        <p style="color: #1FE8F0;font-size: 18px;margin: 12px auto;">
                            <img src="../../statics/image/shebei_fengsu.png" alt="">
                            风速</p>
                    </div>
                    <p style="color:yellow;font-size:18px;margin: 44px auto;font-weight: 530;">
                        {{lhpDataWeatherStation.windSpeed}} m/s</p>
                </div>

                <div class="nr3"
                     style="background: url('../../statics/image/shebei_kuang.png') no-repeat;height:19%;width: 45%;top:45%;left: 52%">
                    <div class="cen" style="background: none;border: none;top:8%">
                        <p style="color: #1FE8F0;font-size: 18px;margin: 12px auto;">
                            <img src="../../statics/image/shebei_fengxiang.png" alt="">
                            风向</p>
                    </div>
                    <p style="color:yellow;font-size:18px;margin: 44px auto;font-weight: 530;">
                        {{lhpDataWeatherStation.windDirection}}°</p>
                </div>
            </div>


            <div style="">
                <div class="nr4"
                     style="background: url('../../statics/image/shebei_kuang.png') no-repeat;height:19%;width: 45%;top:74%;left: 3%">
                    <div class="cen" style="background: none;border: none;top:8%">
                        <p style="color: #1FE8F0;font-size: 18px;margin: 12px auto;">
                            <img src="../../statics/image/shebei_jiangshuiliang.png" alt="">
                            降水量</p>
                    </div>
                    <p style="color:yellow;font-size:18px;margin: 44px auto;font-weight: 530;">
                        {{lhpDataWeatherStation.precipitation}} mm</p>
                </div>

                <div class="nr5"
                     style="background: url('../../statics/image/shebei_kuang.png') no-repeat;height:19%;width: 45%;top:74%;left: 52%">
                    <div class="cen" style="background: none;border: none;top:8%;width: 100%;left: 0%">
                        <p style="color: #1FE8F0;font-size: 18px;margin: 12px auto;">
                            <img src="../../statics/image/shebei_jiangshuiqiangdu.png" alt="">
                            降水强度</p>
                    </div>
                    <p style="color:yellow;font-size:18px;margin: 44px auto;font-weight: 530;">
                        {{lhpDataWeatherStation.precipitationIntensity}} mm/h</p>
                </div>
            </div>


        </div>

    </div>
    <div class="zuo" style="width:18.6%;height: 90%;margin: 0px 0 0 36px;" id="detectorDiv">
        <div class="box1" style="border: 1px solid #2e4984;width: 100%;background: #142747;box-shadow: inset 0px 0px 5px #3367c4;
        height: 90%;margin-left: 4px;padding: 8px">

            <div class="biaoti" style="background: none;width: 100%;left: 0%"><p
                    style="font-size: 20px;margin: 0 auto ;margin-top: 10px;width: 100%;left: 0%">
                &nbsp;地面探测器数据</p></div>
            <div style="">
                <div class="nr2"
                     style="background: url('../../statics/image/shebei_kuang.png') no-repeat;height:19%;width: 45%;top:70px;left: 3%">
                    <div class="cen" style="background: none;border: none;top:8%;width: 100%;left: 0%">
                        <p style="color: #1FE8F0;font-size: 18px;margin: 12px auto;">
                            <img src="../../statics/image/shebei_lumianwendu.png" alt="">
                            路面温度</p>
                    </div>
                    <p style="color:yellow;font-size:18px;margin: 44px auto;font-weight: 530;">
                        {{lhpDataRoadDetector.roadSurfaceTemp}} ℃</p>
                </div>

                <div class="nr1"
                     style="background: url('../../statics/image/shebei_kuang.png') no-repeat;height:19%;width: 45%;top:70px;left: 52%">
                    <div class="cen" style="background: none;border: none;top:8%;width: 100%;left: 0%">
                        <p style="color: #1FE8F0;font-size: 18px;margin: 12px auto;">
                            <img src="../../statics/image/shebei_shihuachengdu.png" alt="">
                            湿滑程度</p>
                    </div>
                    <p style="color:yellow;font-size:18px;margin: 44px auto;font-weight: 530;">
                        {{lhpDataRoadDetector.friction}}</p>
                </div>
            </div>


            <div style="">
                <div class="nr2"
                     style="background: url('../../statics/image/shebei_kuang.png') no-repeat;height:19%;width: 45%;top:45%;left: 3%">
                    <div class="cen" style="background: none;border: none;top:8%;width: 100%;left: 0%">
                        <p style="color: #1FE8F0;font-size: 18px;margin: 12px auto;">
                            <img src="../../statics/image/shebei_lumianzhuangkuang.png" alt="">
                            路面状况</p>
                    </div>
                    <p style="color:yellow;font-size:18px;margin: 44px auto;font-weight: 530;">
                        {{lhpDataRoadDetector.roadCondition}}</p>
                </div>

                <div class="nr3"
                     style="background: url('../../statics/image/shebei_kuang.png') no-repeat;height:19%;width: 45%;top:45%;left: 52%">
                    <div class="cen" style="background: none;border: none;top:8%;width: 100%;left: 0%">
                        <p style="color: #1FE8F0;font-size: 18px;margin: 12px auto;">
                            <img src="../../statics/image/shebei_hanbingbili.png" alt="">
                            含冰比例</p>
                    </div>
                    <p style="color:yellow;font-size:18px;margin: 44px auto;font-weight: 530;">
                        {{lhpDataRoadDetector.icePercentage}} %</p>
                </div>
            </div>


            <div style="">
                <div class="nr4"
                     style="background: url('../../statics/image/shebei_kuang.png') no-repeat;height:19%;width: 45%;top:74%;left: 3%">
                    <div class="cen" style="background: none;border: none;top:8%;width: 100%;left: 0%">
                        <p style="color: #1FE8F0;font-size: 18px;margin: 12px auto;">
                            <img src="../../statics/image/shebei_bingdianwendu.png" alt="">
                            冰点温度
                        </p>
                    </div>
                    <p style="color:yellow;font-size:18px;margin: 44px auto;font-weight: 530;">
                        {{lhpDataRoadDetector.freezingTempNacl}} ℃</p>
                </div>

                <div class="nr5"
                     style="background: url('../../statics/image/shebei_kuang.png') no-repeat;height:19%;width: 45%;top:74%;left: 52%">
                    <div class="cen" style="background: none;border: none;top:8%;width: 100%;left: 0%">
                        <p style="color: #1FE8F0;font-size: 18px;margin: 12px auto;">
                            <img src="../../statics/image/shebei_shuimohoudu.png" alt="">
                            水膜厚度</p>
                    </div>
                    <p style="color:yellow;font-size:18px;margin: 44px auto;font-weight: 530;">
                        {{lhpDataRoadDetector.waterFilmHeight}} μm</p>
                </div>

            </div>
        </div>
    </div>
    <div class="zuo" style="width:18.6%;height: 90%;margin: 0px 0 0 36px;display: none" id="vaisalaDetectorDiv">
        <div class="box1" style="border: 1px solid #2e4984;width: 100%;background: #142747;box-shadow: inset 0px 0px 5px #3367c4;
        height: 90%;margin-left: 4px;padding: 8px">

            <div class="biaoti" style="background: none;width: 100%;left: 0%"><p
                    style="font-size: 20px;margin: 0 auto ;margin-top: 10px;width: 100%;left: 0%">
                &nbsp;地面探测器数据</p></div>
            <div style="">
                <div class="nr2"
                     style="background: url('../../statics/image/shebei_kuang.png') no-repeat;height:19%;width: 45%;top:70px;left: 3%">
                    <div class="cen" style="background: none;border: none;top:8%;width: 100%;left: 0%">
                        <p style="color: #1FE8F0;font-size: 18px;margin: 12px auto;">
                            <img src="../../statics/image/shebei_lumianzhuangkuang.png" alt="">
                            路面状态</p>
                    </div>
                    <p style="color:yellow;font-size:18px;margin: 44px auto;font-weight: 530;">
                        {{lhpDataRoadDetector.roadCondition}}</p>
                </div>

                <div class="nr1"
                     style="background: url('../../statics/image/shebei_kuang.png') no-repeat;height:19%;width: 45%;top:70px;left: 52%">
                    <div class="cen" style="background: none;border: none;top:8%;width: 100%;left: 0%">
                        <p style="color: #1FE8F0;font-size: 18px;margin: 12px auto;">
                            <img src="../../statics/image/shebei_shihuachengdu.png" alt="">
                            湿滑程度</p>
                    </div>
                    <p style="color:yellow;font-size:18px;margin: 44px auto;font-weight: 530;">
                        {{lhpDataRoadDetector.friction}}</p>
                </div>
            </div>


            <div style="">
                <div class="nr2"
                     style="background: url('../../statics/image/shebei_kuang.png') no-repeat;height:19%;width: 45%;top:45%;left: 3%">
                    <div class="cen" style="background: none;border: none;top:8%;width: 100%;left: 0%">
                        <p style="color: #1FE8F0;font-size: 18px;margin: 12px auto;">
                            <img src="../../statics/image/shebei_lumianzhuangkuang.png" alt="">
                            水积累量</p>
                    </div>
                    <p style="color:yellow;font-size:18px;margin: 44px auto;font-weight: 530;">
                        {{lhpDataRoadDetector.waterAmount}} mm</p>
                </div>

                <div class="nr3"
                     style="background: url('../../statics/image/shebei_kuang.png') no-repeat;height:19%;width: 45%;top:45%;left: 52%">
                    <div class="cen" style="background: none;border: none;top:8%;width: 100%;left: 0%">
                        <p style="color: #1FE8F0;font-size: 18px;margin: 12px auto;">
                            <img src="../../statics/image/shebei_hanbingbili.png" alt="">
                            雪积累量</p>
                    </div>
                    <p style="color:yellow;font-size:18px;margin: 44px auto;font-weight: 530;">
                        {{lhpDataRoadDetector.snowAmount}} mm</p>
                </div>
            </div>


            <div style="">
                <div class="nr4"
                     style="background: url('../../statics/image/shebei_kuang.png') no-repeat;height:19%;width: 45%;top:74%;left: 3%">
                    <div class="cen" style="background: none;border: none;top:8%;width: 100%;left: 0%">
                        <p style="color: #1FE8F0;font-size: 18px;margin: 12px auto;">
                            <img src="../../statics/image/shebei_bingdianwendu.png" alt="">
                            冰积累量
                        </p>
                    </div>
                    <p style="color:yellow;font-size:18px;margin: 44px auto;font-weight: 530;">
                        {{lhpDataRoadDetector.iceAmount}} mm</p>
                </div>
            </div>
        </div>
    </div>
    <div class="zuo" style="width: 55%;height: 90%;margin: 0px 0 0 28px" id="div">
        <div id="visibilitiDiv" class="box1"
             style="border: 1px solid #2e4984;width: 360px;background: #142747;box-shadow: inset 0px 0px 5px #3367c4;height:6%;margin-left: 4px;padding: 8px 0 7px 16px">
            <img src="../../statics/image/shebei_nengjiandu.png" alt="">
            <span style="color: #0efcff;font-size: 18px">能见度:</span>&nbsp
            <span style="color: yellow;font-size: 18px; font-weight: 530">{{lhpDataVisibility.visibility}} m</span>&nbsp
        </div>
        <div id="echartDiv" class="box1"
             style="border: 1px solid #2e4984;width: 100%;background: #142747;box-shadow: inset 0px 0px 5px #3367c4;height: 78%;margin-left: 4px;padding: 8px;margin-top: 10px;position: relative">
            <div style=" width: 250px;height: 36px;border: none;border-radius: 2px;color: #fff;font-size: 16px
                ;line-height: 36px;position: absolute;right: 10px;top:10px">
                <img style="margin-bottom: -6px" src="../../statics/image/shebei_xuanze.png" alt="">
                <span>元素选择</span>
                <select style="height: 36px;padding: 6px 12px;font-size: 14px;line-height:36px;color: #555;
                    background-color: #fff;background-image: none;border: 1px solid #ccc;border-radius: 4px;width: 60%;display: inline-block;"id="chart1">
                </select>
            </div>
            <div id="echart" style="width: 100%;height: 90%;margin-top: 42px;">

            </div>
        </div>
    </div>
</div>
<script src="${request.contextPath}/statics/libs/jquery.min.js"></script>
<script src="${request.contextPath}/statics/plugins/layer/layer.js"></script>
<script src="${request.contextPath}/statics/libs/bootstrap.min.js"></script>
<script src="${request.contextPath}/statics/libs/vue.min.js"></script>
<script src="${request.contextPath}/statics/plugins/jqgrid/grid.locale-cn.js"></script>
<script src="${request.contextPath}/statics/plugins/jqgrid/jquery.jqGrid.min.js"></script>
<script src="${request.contextPath}/statics/plugins/ztree/jquery.ztree.all.min.js"></script>
<script src="${request.contextPath}/statics/js/common.js"></script>
<script src="${request.contextPath}/statics/plugins/echarts/echarts.min.js"></script>
<script src="${request.contextPath}/statics/js/modules/baseinfo/showEquipmentParams.js?_${.now?long}"></script>
</body>
</html>